import React from 'react';
import { RouteComponentProps } from 'react-router';
import { Modal, Form, Input, message } from 'antd';
import { getPublicAnalysePageConfig, getPublicReportInfo, validateReportPwd } from 'src/services/AnalyseManage/index';
import EditReportIndex from 'src/pages/AnalyseManage/EditReport/EditReportIndex';
import BdhButton from 'src/pages/Components/BdhButton';

interface IProps {
	setConfig: Function,
	clearHistory: Function,
	pageContentConfig: any,
	match: {
		params: {
			code: string;
			publicType: string;		//	'publicReport'公开报表/截图    or   'subscribe'订阅
		}
	}
}


class PublicReport extends React.PureComponent<RouteComponentProps & IProps> {
	state: any = {
		pageId: '',
		password: '',
		modalVisible: false,
		tenantCode: '',
		decryptType: '',		//	 0: 不需要登录的分享   1: 订阅     2：需要登录的分享
		pageConfig: {
			children: [],
			page: {},
			layoutConfig: []
		}
	};

	async componentDidMount() {
		this.setState( {
			decryptType: this.props.location.pathname.indexOf( '/analyseManage/share' ) > -1 ? '2' : this.props.match.params.publicType === 'publicReport' ? '0' : '1'
		}, () => {
			this.initParams();
		} );

	}

	initParams = async () => {
		let code = this.props.match.params.code;
		if ( code ) {
			const data = await getPublicReportInfo( {
				ciphertext: code,
				decryptType: this.state.decryptType
			} );
			if ( data.data.success ) {
				this.setState( {
					pageId: data.data.data.refPageId,
					tenantCode: data.data.data.tenantCode
				} );

				//	如果未加密
				if ( data.data.data.isEncrypt === '0' ) {
					this.initPageConfig( data.data.data.refPageId, data.data.data.tenantCode );
				} else if ( data.data.data.isEncrypt === '1' ) {
					this.setState( {
						modalVisible: true
					} );
				} else if ( !data.data.data.refPageId ) {
					message.error( '分享链接已失效' );
				}

			}
		}
	};

	initPageConfig = async ( pageId, tenantCode ) => {
		let pageConfigResponse = await getPublicAnalysePageConfig( { pageId: pageId, type: 'PUBLISH', tenantCode } );
		if ( pageConfigResponse.data && pageConfigResponse.data.success ) {
			let pageConfig = pageConfigResponse.data.data.content;

			if ( pageConfig ) {
				this.setState( { pageConfig: JSON.parse( pageConfig ) } );
			}

		}
	};

	handleOk = async () => {
		if ( !this.state.password ) return message.error( '请输入密码' );

		const info = await validateReportPwd( {
			pageId: this.state.pageId,
			password: this.state.password,
			tenantCode: this.state.tenantCode
		} );
		if ( info.data.data ) {
			this.setState( {
				modalVisible: false
			} );
			this.initPageConfig( this.state.pageId, this.state.tenantCode );
		} else {
			message.error( '密码错误' );
		}
	};

	handleChange = ( event ) => {
		this.setState( {
			password: event.target.value
		} );
	}

	render() {
		return (
			<>
				<Modal
					title="请输入报表分享密码"
					visible={ this.state.modalVisible }
					okText='确定'
					closable={ false }
					footer={ <BdhButton onClick={ this.handleOk } label='确定' type='primary'></BdhButton> }
				>
					<Form labelCol={ { span: 3 } } labelAlign='left'>
						<Form.Item label='密码'>
							<Input.Password value={ this.state.password } onChange={ this.handleChange }/>
						</Form.Item>
					</Form>
				</Modal>
				<EditReportIndex
					pageType={ this.state.pageConfig.page.type }
					pageContentConfig={ this.state.pageConfig }
					isEdit={ false }
					pageId={ this.state.pageId }
					saveConfig={ () => {} }
					onValuesChange={ () => {} }
					publishConfig={ () => {} }
					isPublic={ true }
					tenantCode={this.state.tenantCode}
				></EditReportIndex>
			</>
		);
	}
}

export default PublicReport;
